<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex</title>
    <style>
        .bigbox{
            width:300px;
            height:300px;
            background-color: wheat;
            margin:0 auto;
            display: flex;
            margin-top:15px;
        }
        .box1{
            flex-direction: row-reverse;
        }
        .box {
            width: 80px;
            height: 80px;
            background-color: hotpink;
            margin: 5px;
            text-align: center;
            line-height: 80px;
        }
        .box2{
            flex-direction: row-reverse;
            flex-wrap: wrap;
            /*wrap-reverse表示换行后第一行在下面*/
        }
        .box3{
            flex-flow:column-reverse wrap;
        }
        .box4{

            flex-direction: row-reverse;
            justify-content: space-between;
        }
        .box5{
            flex-direction: row-reverse;
            align-items: stretch;
        }
        .box5 div{
            height:auto;
        }
        .box6{
            flex-direction: row-reverse;
            flex-wrap: wrap;
            justify-content: center;
            align-content: flex-start;
        }
        .item{
            order:-3;
        }
        .box7,.box8,.box9{
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-content: flex-start;
        }
        .item1{
            order:-3;
            flex-grow:2;
        }
        .box9{
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            align-content: flex-start;
            flex-shrink: 1;
        }
        .item2{
            flex-shrink: 0;
        }
        .box10{
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
        }
        .box10 .item2{
            flex-basis: 200px;
        }
    </style>
</head>
<body>
<!--设置flex之后子元素的float，clear，vertical-align属性全部消失-->
<!--flex有留个属性：flex-direction，flex-warp，flex-flow，juatify-content，
align-items，align-content-->
<!--flex-direction属性决定了主轴的方向：row|row-reverse|column|column-reverse-->
<!--主轴的demo-->
<div class="bigbox box1">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>
<!--flex-warp属性： nowrap | wrap | wrap-reverse;-->
<!--flex-warp属性： nowrap | wrap | wrap-reverse;默认情况下，项目都拍在一条线上，
这个属性决定是否换行，如果不换行可能会挤压变形,-->
<div class="bigbox box2">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
</div>
<!--flex-flow：<flex-direction>||<flex-wrap>-->
<div class="bigbox box3">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
</div>
<!--justify-content:flex-start | flex-end | center | space-between | space-around-->
<!--space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。-->
<div class="bigbox box4">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>
<!--align-items:定义了项目在交叉轴如何对齐-->
<!--align-items: flex-start | flex-end | center | baseline | stretch;-->
<!--baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。设置了高度那就是默认值，flex-strat-->
<!--这个属性定义的是这一排应该向上对齐还是向下对齐-->
<div class="bigbox box5">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
</div>

<!--align-content:定义了多根轴线的对齐方式，只有一根周线的话，该属性不起作用-->
<div class="bigbox box6">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box item">7</div>
</div>
<!--所以justify-content：是设置水平一条轴的对齐方式，align-content
是设置好多条轴是朝上对齐还是朝下对齐-->
<!--还有六个项目属性，order。flex-grow。flex-shrink，flex-basis。flex，align-self-->
<!--order属性定义项目的排列顺序，数值越小，排列越靠前，默认为no-->
<div class="bigbox box7">
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box item">7</div>
</div>
<!--flex-grow:属性定义项目的放大比例，默认为0，如果存在剩余空间也不放大，-->
<div class="bigbox box8">
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box item1">7</div>
</div>
<!--flex-shrink:属性定义了项目缩小比例，默认为1，即使空间不足，该项目将缩小
而我感觉flex-grow确实根据自己的空间去分配的-->
<!--eee,用这个属性的时候不能用换行，不然是失效的-->
<div class="bigbox box9">
    <div class="box">5</div>
    <div class="box item2">6</div>
    <div class="box">7</div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>
<!--flex-basis属性定义了分配多余空间之前，项目占据的株洲空间，浏览器根据这个属性，计算主轴是否有多余空间
-->
<div class="bigbox box10">
    <div class="box">5</div>
    <div class="box item2">6</div>
    <div class="box">7</div>
</div>
<!--flex属性是flex-grow，flex-shrink，flex-basis的简写，默认为0 1 auto-->
<!--align-self属性允许单个项目与其他项目不一样的额对齐方式，可覆盖align-items
属性，默认继承父元素的align-items，没有父元素那就stretch,align
item是交叉轴上对齐方式-->


</body>
</html>